{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-table
		    :data="tableData"
		    style="width: 100%"
		    row-key="rid"
    		stripe
		    lazy
		    :load="initHtml"
		    :tree-props="defaultProps">
		    <el-table-column
		      prop="rid"
		      label="ID"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="title"
		      label="角色">
		    </el-table-column>
		    <el-table-column
		      label="/"
		      width="240">
		      <template slot-scope="scope" v-if="scope.row.rid">
		        <el-button
		            type="warning"
		            size="minism"
		            @click="updateRoleFileAjax(scope.row.rid)">
		            更新权限
		        </el-button>
		        <el-button
		            type="primary"
		            size="minism"
		            @click="window.open('/editRole/'+scope.row.rid)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            size="minism"
		            @click="delRole(scope.$index, scope.row)">
		            删除
		        </el-button>
		      </template>
		    </el-table-column>
		</el-table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			search:{
				rid:0,
			},
			tableData:[],
	        defaultProps: {
	          	children: 'children',
          		hasChildren: 'hasChildren'
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	delRole(index,row){
	      		var _this=this;
		        this.$confirm('是否确定删除【'+row.title+'】角色？', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          dangerouslyUseHTMLString:true,
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/delRole/'+row.rid,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.tableData.splice(index,1);
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
	    	},
	    	updateRoleFileAjax(id) {
		        this.$confirm('即将更新角色缓存, 是否继续?', '提示', {
		          confirmButtonText: '继续',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/updateRoleFileAjax/'+id,function(ret) {
		    			loading.close();
		    			if(ret){
		    				if(ret.code === 0){
		    					XYBase.success(ret.msg);
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
	    	},
	      	initHtml(tree, treeNode, resolve) {
	      		var _this=this;
		      	if (typeof tree != "undefined")
		      		_this.search.rid=tree.rid;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								if (!_this.search.rid) {
									var D=[];
									for (var i = 0; i < ret.data.length; i++) {
										var dd=ret.data[i];
										dd.hasChildren=true;
										D.push(dd);
									}
									_this.tableData=D;
								}else{
									var D=[];
									for (var i = 0; i < ret.data.length; i++) {
										var dd=ret.data[i];
										dd.rid=0;
										dd.hasChildren=false;
										D.push(dd);
									}
									resolve(D);
								}
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			},
	    }
	});
	$(function(){
		vm.initHtml();
	});
</script>
{/block}